<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台 - 火调报告生成</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
        }
        .main-content {
            height: calc(100vh - 60px);
            overflow-y: auto;
        }
        .nav-item {
            position: relative;
        }
        .nav-item:not(:last-child):after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
        }
        .step-item {
            position: relative;
        }
        .step-item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 35px;
            right: -50%;
            width: 100%;
            height: 2px;
            background-color: #e2e8f0;
            z-index: 1;
        }
        .step-item.active:not(:last-child)::after,
        .step-item.completed:not(:last-child)::after {
            background-color: #e11d48;
        }
        .step-circle {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #f1f5f9;
            border: 2px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
        }
        .step-item.active .step-circle {
            background-color: #fecdd3;
            border-color: #e11d48;
            color: #e11d48;
        }
        .step-item.completed .step-circle {
            background-color: #e11d48;
            border-color: #e11d48;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <nav class="bg-gradient-to-r from-red-600 to-red-800 shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="logo flex items-center">
                        <i class="fas fa-fire-extinguisher mr-2"></i>
                        <span>火灾调查知识库平台</span>
                    </div>
                </div>
                
                <div class="flex items-center space-x-1">
                    <a href="index.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-search mr-1"></i> 检索
                    </a>
                    <a href="knowledge-graph.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </a>
                    <a href="ai-search.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </a>
                    <a href="report-generator.html" class="nav-item text-white bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </a>
                    <a href="model-cockpit.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </a>
                    <a href="user-center.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user mr-1"></i> 个人中心
                    </a>
                    <a href="login.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-sign-in-alt mr-1"></i> 登录
                    </a>
                    <a href="register.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user-plus mr-1"></i> 注册
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 - 火调报告生成页面 -->
    <div class="main-content container mx-auto px-4 py-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="mb-6">
                <h2 class="text-2xl font-bold text-gray-800">火灾调查报告生成</h2>
                <p class="text-gray-600 mt-2">通过AI智能分析系统，生成专业、规范的火灾调查报告</p>
            </div>

            <!-- 步骤导航 -->
            <div class="mb-8">
                <div class="flex justify-between">
                    <div class="step-item completed text-center" style="width: 20%">
                        <div class="step-circle mx-auto">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="mt-2 text-sm font-medium">基本信息</div>
                    </div>
                    <div class="step-item active text-center" style="width: 20%">
                        <div class="step-circle mx-auto">
                            <span>2</span>
                        </div>
                        <div class="mt-2 text-sm font-medium">现场勘验</div>
                    </div>
                    <div class="step-item text-center" style="width: 20%">
                        <div class="step-circle mx-auto">
                            <span>3</span>
                        </div>
                        <div class="mt-2 text-sm font-medium">询问笔录</div>
                    </div>
                    <div class="step-item text-center" style="width: 20%">
                        <div class="step-circle mx-auto">
                            <span>4</span>
                        </div>
                        <div class="mt-2 text-sm font-medium">证据分析</div>
                    </div>
                    <div class="step-item text-center" style="width: 20%">
                        <div class="step-circle mx-auto">
                            <span>5</span>
                        </div>
                        <div class="mt-2 text-sm font-medium">报告生成</div>
                    </div>
                </div>
            </div>

            <!-- 主要内容区域 - 分步骤表单 -->
            <div id="step-content">
                <!-- 步骤2：现场勘验 -->
                <div>
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-semibold text-gray-800">现场勘验信息</h3>
                        <div>
                            <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 flex items-center text-sm">
                                <i class="fas fa-clipboard-list mr-1"></i> 加载模板
                            </button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 左侧内容 -->
                        <div>
                            <!-- 现场基本情况 -->
                            <div class="mb-6">
                                <h4 class="font-medium text-gray-700 mb-3">现场基本情况</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">勘验时间</label>
                                        <input type="datetime-local" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">勘验地点</label>
                                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" placeholder="详细地址...">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">勘验人员</label>
                                        <div class="flex space-x-2">
                                            <input type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" placeholder="人员姓名...">
                                            <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap mt-2 gap-2">
                                            <div class="bg-gray-100 px-2 py-1 rounded-md text-sm flex items-center">
                                                张三 <button class="ml-1 text-gray-500 hover:text-red-500"><i class="fas fa-times"></i></button>
                                            </div>
                                            <div class="bg-gray-100 px-2 py-1 rounded-md text-sm flex items-center">
                                                李四 <button class="ml-1 text-gray-500 hover:text-red-500"><i class="fas fa-times"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">天气状况</label>
                                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500">
                                            <option>晴</option>
                                            <option>多云</option>
                                            <option>阴</option>
                                            <option>小雨</option>
                                            <option>大雨</option>
                                            <option>雷雨</option>
                                            <option>雪</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">现场环境描述</label>
                                        <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" placeholder="详细描述现场环境..."></textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 火灾痕迹与物证 -->
                            <div>
                                <h4 class="font-medium text-gray-700 mb-3">火灾痕迹与物证</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">燃烧痕迹描述</label>
                                        <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" placeholder="描述燃烧痕迹分布情况..."></textarea>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">起火点判定</label>
                                        <textarea rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" placeholder="描述起火点位置及判定依据..."></textarea>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">物证采集</label>
                                        <div class="border border-gray-300 rounded-md p-3">
                                            <div class="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md p-4 mb-3">
                                                <div class="text-center">
                                                    <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                                                    <p class="text-sm text-gray-500">拖拽文件到此处或<span class="text-blue-500">点击上传</span></p>
                                                    <p class="text-xs text-gray-400 mt-1">支持图片、视频或文档文件</p>
                                                </div>
                                            </div>
                                            <div class="grid grid-cols-3 gap-2">
                                                <div class="relative">
                                                    <img src="https://via.placeholder.com/100x100" alt="物证照片" class="w-full h-24 object-cover rounded">
                                                    <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                                <div class="relative">
                                                    <img src="https://via.placeholder.com/100x100" alt="物证照片" class="w-full h-24 object-cover rounded">
                                                    <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧内容 -->
                        <div>
                            <!-- 现场平面图 -->
                            <div class="mb-6">
                                <h4 class="font-medium text-gray-700 mb-3">现场平面图</h4>
                                <div class="border border-gray-300 rounded-md p-3">
                                    <div class="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md p-6 mb-3">
                                        <div class="text-center">
                                            <i class="fas fa-map text-gray-400 text-3xl mb-2"></i>
                                            <p class="text-sm text-gray-500">上传现场平面图或<span class="text-blue-500">使用绘图工具</span></p>
                                        </div>
                                    </div>
                                    <div class="flex space-x-2 mb-2">
                                        <button class="px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 text-sm flex items-center">
                                            <i class="fas fa-draw-polygon mr-1"></i> 绘制区域
                                        </button>
                                        <button class="px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 text-sm flex items-center">
                                            <i class="fas fa-fire mr-1"></i> 标记起火点
                                        </button>
                                        <button class="px-2 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 text-sm flex items-center">
                                            <i class="fas fa-expand-arrows-alt mr-1"></i> 火势蔓延
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 现场照片 -->
                            <div class="mb-6">
                                <h4 class="font-medium text-gray-700 mb-3">现场照片</h4>
                                <div class="border border-gray-300 rounded-md p-3">
                                    <div class="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md p-6 mb-3">
                                        <div class="text-center">
                                            <i class="fas fa-camera text-gray-400 text-3xl mb-2"></i>
                                            <p class="text-sm text-gray-500">上传现场照片<span class="text-blue-500">（至少3张）</span></p>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-3 gap-2">
                                        <div class="relative">
                                            <img src="https://via.placeholder.com/100x100" alt="现场照片" class="w-full h-24 object-cover rounded">
                                            <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        <div class="relative">
                                            <img src="https://via.placeholder.com/100x100" alt="现场照片" class="w-full h-24 object-cover rounded">
                                            <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        <div class="relative">
                                            <img src="https://via.placeholder.com/100x100" alt="现场照片" class="w-full h-24 object-cover rounded">
                                            <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- AI分析建议 -->
                            <div>
                                <h4 class="font-medium text-gray-700 mb-3">AI分析建议</h4>
                                <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-robot text-blue-500 text-xl"></i>
                                        </div>
                                        <div class="ml-3">
                                            <h5 class="text-sm font-medium text-blue-800">智能分析结果</h5>
                                            <div class="mt-1 text-sm text-blue-700">
                                                <p>根据您提供的现场照片和描述，系统检测到以下关键信息：</p>
                                                <ul class="list-disc ml-5 mt-1 space-y-1">
                                                    <li>照片中电气设备周围碳化痕迹明显，建议重点勘验电气系统</li>
                                                    <li>根据燃烧痕迹，起火点可能位于东北角区域</li>
                                                    <li>建议采集电线短路熔珠等物证进行进一步分析</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 表单底部按钮 -->
                    <div class="mt-8 flex justify-between">
                        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 flex items-center">
                            <i class="fas fa-arrow-left mr-1"></i> 上一步
                        </button>
                        <div>
                            <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-100 mr-2">
                                保存草稿
                            </button>
                            <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 flex items-center">
                                下一步 <i class="fas fa-arrow-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('火调报告生成页面已加载');
        });
    </script>
</body>
</html> 